<script setup lang="ts">
import { callHandler } from './js_bridge'

// 定义脚本列表数据
const scripts = [
  { name: '抖音极速版', desc: '自动刷视频获取金币', path: 'tiktok/index.js' },
]

// 处理脚本点击事件
const handleScriptClick = (data: object) => {
  callHandler('start', JSON.stringify(data))
}
</script>

<template>
  <div class="main">
    <!-- <h1 class="title">脚本管理器</h1> -->
    <div class="script-list">
      <div 
        v-for="script in scripts" 
        :key="script.path" 
        class="script-card"
        @click="handleScriptClick(script)"
      >
        <h3>{{ script.name }}</h3>
        <p class="description">{{ script.desc }}</p>
        <button class="start-btn">启动脚本</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

h1,h3{
  margin-top: 0;
}

.main {
  padding: 15px;
  max-width: 100%;
  margin: 0 auto;
}

.script-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.script-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-3px);
  }
}

.description {
  color: #666;
  margin: 10px 0;
}

.start-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.3s;
  
  &:hover {
    background: #2980b9;
  }
}
</style>